<!-- Author:Rain -->

<template>
    <div class="resume-section-content">
        <div class="resume-edit" id="">
            <div class="resume-edit-content">
                <div class="basic-info-edit">
                    <div class="ant-card-meta">
                        <div class="ant-card-meta-avatar">
                            <span class="avatar-container">
                                <span class="ant-avatar ant-avatar-circle ant-avatar-image"
                                    style="width: 64px; height: 64px; line-height: 64px; font-size: 18px;">
                                    <img :src="profile">
                                    <input @change="changeFile($event)" accept="image/png,image/gif,image/jpeg"
                                        title="上传头像"
                                        style="cursor: pointer;position: absolute;width: 100%;height: 100%;z-index: 20;top: 0;left: 0;opacity: 0;"
                                        type="file">
                                </span>
                            </span>
                        </div>
                        <div class="ant-card-meta-detail">
                            <div class="ant-card-meta-title"><span>上传头像</span></div>
                            <div class="ant-card-meta-description">数据表明招聘者对真实头像更有好感</div>
                        </div>
                    </div>
                    <div class="edit-form-content">
                        <form class="ant-form ant-form-vertical">
                            <!-- 姓名 -->
                            <RainInput title="真实姓名" @sendInput="val => basicInfo.name = val" :value="basicInfo.name"
                                placeholder="请填写你的名字" />
                            <!-- 性别 -->
                            <RainRadio :option="['男', '女']"
                                @sendSelect="val => basicInfo.gender = (val == 0 ? '男' : '女')"
                                :value="basicInfo.gender == '男' ? 0 : 1" title="性别" />
                            <!-- 当前城市 -->
                            <RainPosCity title="当前城市" @sendInput="val => basicInfo.location = val"
                                :value="basicInfo.location" type="city" />
                            <!-- 出生日期 -->
                            <RainTime title="出生时间" @sendTime="val => basicInfo.birthday = YearMonthToString(val)"
                                :value="YearMonthToJSON(basicInfo.birthday)" />
                            <!-- 目前的工作状态 -->
                            <RainSelect title="目前状态" @sendSelect="val => forjobInfo.status = val"
                                :value="forjobInfo.status" :options="[`离校，正在找工作`, `在校，可即可到岗`, `在校，看看机会`, `在校，暂时不找工作`]"
                                placeholder="请在这里填写上" />
                            <!-- 政治面貌 -->
                            <RainSelect title="政治面貌" :value="basicInfo.politics"
                                @sendSelect="val => basicInfo.politics = val"
                                :options="[`中共党员`, `中共预备党员`, `共青团员`, `群众`, `民主党派`, `其他`]" placeholder="请在这里填写上" />
                            <!-- 手机号 -->
                            <RainInput title="手机号码" :value="basicInfo.phone" placeholder="填写手机号码" />
                            <RainInput title="邮箱" @sendInput="val => basicInfo.post = val" :value="basicInfo.post"
                                placeholder="选填" />
                            <RainSelect title="我的身份"
                                @sendSelect="val => forjobInfo.identity = (val == 0 ? '学生' : '职场人')"
                                :value="forjobInfo.identity == '学生' ? 0 : 1" :options="['学生', '职场人']" />
                            <RainInput title="微信号" @sendInput="val => basicInfo.weixin = val" :value="basicInfo.weixin"
                                placeholder='请填写微信号' />
                        </form>
                    </div>
                </div>
                <div class="resume-edit-btn">
                    <button type="button" @click="cancel" class="ant-btn ant-btn-lg btn-cancel"><span>取消</span></button>
                    <button type="button" @click="submit"
                        class="ant-btn ant-btn-primary ant-btn-lg btn-submit"><span>确定</span></button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { RainInput, RainRadio, RainTime, RainPosCity, RainSelect } from "@/components/formitems/index"
import { YearMonthToString, YearMonthToJSON, getAge, todoPicPath, changeFile } from "@/utils/todo"
import { updateBasicInfo, updateForjobInfo } from "@/api/user/index"
import { useUserStore } from "@/store/modules/user"
const userStore = useUserStore()
const emit = defineEmits(["closeEdit", "submitEdit"])
const props = defineProps(['basicInfo', 'forjobInfo'])
const { basicInfo, forjobInfo } = toRefs(props)//这样做的话就能变成响应式的了
const profile=ref(basicInfo?.value.profile)

userStore.$subscribe((mutation, state) => {
    profile.value=todoPicPath(state.user.basicInfo?.profile);
})




//当下面的确认按钮或者点击按钮点击后，进行判断！！
function cancel() {
    //这个是直接关闭！！！
    emit("closeEdit")
}

function submit() {
    //提交获取到的数据，并且进行关闭
    //这里进行数据提交一遍的,编辑改动涉及到了basicInfo，forjobInfo
    //喵的，我发现还需要进行整合
    let BasicInfo = {
        name: basicInfo?.value.name,
        gender: basicInfo?.value.gender,
        location: basicInfo?.value.location,
        birthday: basicInfo?.value.birthday,
        post: basicInfo?.value.post,
        age: getAge(basicInfo?.value.birthday),
        politics: basicInfo?.value.politics,
        weixin: basicInfo?.value.weixin
    }
    let ForjobInfo: any = {
        status: forjobInfo?.value.status,
        identity: forjobInfo?.value.identity,
        salary: {}
    }

    //更新基本信息  // //更新职位信息
    Promise.all([updateBasicInfo(BasicInfo), updateForjobInfo(ForjobInfo)]).then(val => {
        console.log(val);
        //弹出更新数据成功
        ElMessage({
            message: "数据更新成功~",
            type: 'success',
        })

        emit("submitEdit")
    }).catch(err => {
        console.log(err);
        ElMessage({
            message: "数据更新失败！",
            type: 'error',
        })
    })
}
</script>

<style scoped>
.resume-edit {
    width: 100%;
    background: #f6f8fb;
}

.resume-edit-content {
    padding: 24px 0;
}

/* 基本信息编辑 */
.basic-info-edit {
    padding: 0 36px;
    padding-bottom: 30px;
}

.basic-info-edit .ant-card-meta {
    display: inline-block;
    margin-bottom: 32px;
    margin: -4px 0;
}

.ant-card-meta::after,
.ant-card-meta::before {
    display: table;
    content: "";
}

.ant-card-meta:after {
    clear: both;
}

.ant-card-meta-avatar {
    float: left;
    padding-right: 16px;
}

.avatar-container {
    display: inline-block;
    position: relative;
}

.ant-avatar {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #000;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
    position: relative;
    display: inline-block;
    overflow: hidden;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    background: #ccc;
    width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 50%;
}

.ant-avatar-image {
    background: transparent;
}

.ant-avatar>img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.ant-card-meta-detail {
    overflow: hidden;
}

.basic-info-box .ant-card-meta-title {
    font-size: 20px;
    font-weight: 700;
}

.ant-card-meta-title {
    overflow: hidden;
    color: #07132b;
    font-weight: 500;
    font-size: 16px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.basic-info-edit .ant-card-meta .ant-card-meta-title {
    color: #ff6400;
    font-weight: 400;
}

.ant-card-meta-detail>div:not(:last-child) {
    margin-bottom: 8px;
}

.basic-info-edit .ant-card-meta .ant-card-meta-description {
    font-size: 13px;
    font-weight: 400;
    color: #8b98a9;
}

/* 表单 */
.ant-form {
    box-sizing: border-box;
    margin: 0;
    padding: 0px;
    color: #000;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum";
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px 20px;
    /* 原来flex布局中也可以用gap */
}

/* 简历按钮样式 */
.resume-edit-btn {
    text-align: right;
    padding: 0 56px;
}

.resume-edit-btn .btn-cancel,
.resume-edit-btn .btn-submit {
    width: 100px;
    height: 40px;
    border-radius: 4px;
    font-size: 14px;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
}

.resume-edit-btn .btn-submit {
    color: #fff;
    background-color: #ff6400;
    border: 1px solid;
}

.resume-edit-btn .btn-cancel {
    margin-right: 16px;
    border: 1px solid #ff6400;
    color: #ff6400;
}
</style>